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ABSTRACT 


Currently the development and creation of websites is imposed on the world as a 
technological tool to unite the regions, create businesses, support companies, be displayed 
in the market and infinity of applications according to the perspectives of people and their 
scope, finding on the internet, a vital source of job creation, efficient and intelligent 
businesses and great help in achieving objectives and approaches. 

Web development in recent decades has been transforming and driving the 
evolution of the Internet, every day greater progress on this issue, directly involving the 
ingenuity of the developer on the subject. 

With the passing of time, new steps are being taken in search of a more stable, 
creative and efficient web environment where user interaction with the network is simple 
and practical for users. 

The web entrepreneur must know deeply about the design of virtual spaces, having 
clear the minimum requirements for the creation of sites, where the priority is the 
information and the use of it creating rapid and efficient exchange methods, to carry out 
projects that comply with the required guidelines; One of the tasks is to create systems that 
generate solutions to problems related to communication, currently based on the use of the 
Internet. 

In order for websites to be dynamic and efficient, very specific and relevant aspects 
must be taken into account for the proper use of this technology, both the technical part 
and the use of external resources, it is not the same to see a website in the city where data 
transfer resources are high to visualize it in rural environments where resources are limited 
or nonexistent, this is one of the great risks that are faced, which can lead to losing interest 
in it because it is not accessible , so the planning is vital for the good performance of the 
same in environments of different characteristics being just one of the problems that can 


affect the creation of a website. 


INSTITUTE PROFILE 


Gems IT Expert 

Gems IT Expert has been founded by group of senior IT Professionals. Right from the 
inception of this start up, Gems IT Expert has prospered by leaps and bounds in technology 
products and critical solutions. Our technologies are acknowledged by leading names of 
the industry such as Sun Microsystems, Oracle, and Computer Associates etc. 

From innovative ideas to their implementation and thereafter, Gems IT Expert offers all 
business transformation outsourcing services to clients under one flagship in four different 
phases of consulting, developing, outsourcing and training 


LOGIC BUILDING 


Coding in its most essential form is nothing but problem solving. It deals with figuring out 
logical solutions and implementing them optimally. The process of learning to code, 
transforms a person into an analytical thinker with strong mathematical and logical skills. 


CAREER TRANSFORMATION 


Having been a standalone field for a long time, the software industry has now come neck 
to neck with most of the other industries by close coordination and easy integration. From 
the smallest light bulb to the most massive aircrafts, every industry is now implementing 
the use of computer programming for the convenience of the end user. A good command 
over coding can thus open a wide variety of employment opportunities. 


GLOBAL IMPACT 


Computer programming these days is also being used to address some of the biggest issues 
that humankind is facing with like climate change, healthcare, education and many more. 
More than being a developer or a designer, knowledge of coding can also help you become 
the harbinger of the change that you want to see. 
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Chapter 1 


Introduction to Web Development 


Among web professionals, "web development" usually refers to the main non-design 
aspects of building web sites: writing markup and coding. Web development may use content 
management systems (CMS) to make content changes easier and available with basic 


technical skills. 


Web development can range from developing a simple single static page of plain text 
to complex web-based internet applications (web apps), electronic businesses, and social 
network services. A more comprehensive list of tasks to which web development commonly 
refers, may include web engineering, web design, web content development, client liaison, 
client-side/server-side scripting, web server and network security configuration, and e- 


commerce development. 


DEFINATION: Web development is the work involved in developing a web site for the 


Internet (World Wide Web) or an intranet (a private network). 


For larger organizations and businesses, web development teams can consist of 
hundreds of people (web developers) and follow standard methods like Agile methodologies 
while developing websites. Smaller organizations may only require a single permanent or 
contracting developer, or secondary assignment to related job positions such as a graphic 
designer or information systems technician. Web development may be a collaborative effort 


between departments rather than the domain of a designated department. 


1.1 WHY WEB DEVELOPMENT? 


To answer this question, we should look at two issues: 


(1). What are the goals of Web Development 
(2). Why these goals are important and desirable 


1.1.1 The Goals of Web Development 


One of the greatest advances in technological tools has been the use of the Internet, due 
to its rapid reception, its transfer speeds and the effectiveness of resources, since access 
to its different applications is almost immediate, information of any content can be found 
, in any class and of any kind, it is important to set clear goals and objectives, in the 
creation of websites defining the service and use that will be given to the information, 
having a clear vision of the type of audience that will host these pages and will be 
potential users of them. 

Currently the development and creation of websites is imposed on the world as a 
technological tool to unite the regions, create businesses, support companies, be 
displayed in the market and infinity of applications according to the perspectives of 
people and their scope, finding on the internet, a vital source of job creation, efficient and 
intelligent businesses and great help in achieving objectives and approaches. 

Web development in recent decades has been transforming and driving the evolution of 
the Internet, every day greater progress on this issue, directly involving the ingenuity of 
the developer on the subject. 

With the passing of time, new steps are being taken in search of a more stable, creative 
and efficient web environment where user interaction with the network is simple and 


practical for users. 


1.1.2 Why the goals of Web-D are important and desirable. 


It is self-evident that the goals of Web-D are important and desirable. However, we still 
give some more supporting argument to this issue. 

First of all, the web entrepreneur must know deeply about the design of virtual spaces, 
having clear the minimum requirements for the creation of sites, where the priority is the 
information and the use of it creating rapid and efficient exchange methods, to carry out 
projects that comply with the required guidelines; One of the tasks is to create systems 
that generate solutions to problems related to communication, currently based on the use 


of the Internet. 


In order for websites to be dynamic and efficient, very specific and relevant aspects must 
be taken into account for the proper use of this technology, both the technical part and the 
use of external resources, it is not the same to see a website in the city where data transfer 
resources are high to visualize it in rural environments where resources are limited or 
nonexistent, this is one of the great risks that are faced, which can lead to losing interest 
in it because it is not accessible , so the planning is vital for the good performance of the 
same in environments of different characteristics being just one of the problems that can 
affect the creation of a website. 

The implementation of new updates, allow developers to be proactive in the solution and 
implementation of new designs more effective and competitive, leading by new 
directions in search of a final product according to the needs of each new user, where the 
marketing of These pages require web designers innovation in creation. You should have 
ideas that awaken in the users an interest when exploring these proposals. 

The stages of development of current websites and their programming languages are very 
complex because of their extensive and varied code. Therefore, it is necessary to know 
tools that are currently available to dynamically develop web pages. 

For the initiation of website design it is very important to have knowledge bases in the 
use of the programming language, both in HTML and other tools such as PHP, JAVA- 
SCRIPT, Dreamweaver, among others. They are a very interesting tool that induces joint 
work in the wonderful world of web page design, with the appropriation and correct 
handling of the tools, you can get to operate innovative and creative designs when 
marketing and offering the products made. 

The network is a mechanism where information is stored and processed at great speeds, 
mostly handled through web pages, where daily users perform a number of operations 


according to their web management. 


Chapter 2 


Web Development Overview 


There are two broad divisions of web development — 
(1) Front-end development (also called client-side development) 
(2) Back-end development (also called server-side development). 
Front-end development refers to constructing what a user sees when they load a web 
application — the content, design and how you interact with it. This is done with three 


codes — HTML, CSS and JavaScript. 


HTML — All code in a web application is eventually translated to HTML. It’s the 
language that web browsers understand and use to display information to users. A web 
developer’s understanding of HTML is analogous to a carpenter’s understanding of a 


screwdriver. It’s so important and necessary that it’s often assumed for employment. 


CSS — By itself, HTML is quite plain. HTML does provide some basic style options, but 
to build a good frontend, developers must have experience with CSS. CSS provides the 
paint, templates, glitter, buttons, tassel, lights, and many other things that can be used to 
improve the presentation of a web page. CSS is so commonly used that languages have 
been built to make writing CSS easier. These languages — like Sass and LESS — are also 
known as CSS precompilers, but they are simply used to write more efficient and 


manageable CSS code. 


JavaScript — If you could only learn one language in your lifetime, you’d be well- 
advised to choose JavaScript. Though it’s not exclusively a frontend language, that’s 
where it’s most commonly used. JavaScript is a language that is run on a client machine, 
i.e. a user’s computer. This means that JavaScript can be used to program fast, intuitive 
and fun user experiences, without forcing a user to refresh their web page. Drag-and- 
drop, infinite-scroll and videos that come to life on a web page can all be programmed 
with JavaScript. Frameworks like Angular, Ember, React and Backbone are all very 


widely used for JavaScript-heavy frontends. 


Here’s an example. Say you log into your Facebook account, and you are greeted with 
the latest updates in your News Feed. They’re not going to be the same updates that you 
saw yesterday. 


How did the page change? Did a Facebook employee manually edit the page to update 
your news feed? Of course not. A script on the Facebook back-end would have received 
the updates and re-generated the front-end accordingly. 


Back-end scripts are written in many different coding languages and frameworks, such as... 


PHP 

Ruby on Rails 
ASP.NET 
Perl 

Java 

Node.js 
Python 


Back-end Development is the term used for the behind-the-scenes activities that happen 
when performing any action on a website. It can be logging in to your account or 


purchasing a watch from an online store. 


Backend developer focuses on databases, scripting, and the architecture of websites. 
Code written by back-end developers helps to communicate the database information to 
the browser. Most common example of Backend programming is when you are reading 
an article on the blog. The fonts, colors, designs, etc. constitute the frontend of this page. 
While the content of the article is rendered from a server and fetched from a database. 


This is the backend part of the application 


The backend of a web application is an enabler for a frontend experience. An 
application’s frontend may be the most beautifully crafted web page, but if the 
application itself doesn’t work, the application will be a failure. The backend of an 
application is responsible for things like calculations, business logic, database 


interactions, and performance. Most of the code that is required to make an application 


work will be done on the backend. Backend code is run on the server, as opposed to the 
client. This means that backend developers not only need to understand programming 
languages and databases, but they must have an understanding of server architecture as 
well. If an application is slow, crashes often, or constantly throws errors at users, it’s 


likely because of backend problems. 


Backend development is not all ones and zeros though. Much like frontend development, 
backend development has a human aspect to it as well. Since most of the code for an 
application is written on the backend, it should be easy to understand and work with. 
Most backend languages — like Ruby and Python — have standardized styles and idioms 


that make reading and writing code more efficient and enjoyable. 


2.1 The Architecture of a PHP Web Application 


Presentation 


REST API 


Database 


3rd party API 


10 


Chapter-3 
INTRODUCTION TO HTML 


HTML is a Hypertext MarkupLanguage for describing web documents (web pages). 


HTML stands for Hyper Text Markup Language 

HTML describes the structure of a Web page 

HTML consists of a series of elements 

HTML elements tell the browser how to display the content 


HTML elements are represented by tags 


wom 


HTML tags label pieces of content such as "heading", "paragraph", "table", and so on 


Browsers do not display the HTML tags, but use them to render the content of the page 
Basics of HTML 


Syntax: 


<!DOCTYPE html> 
<html> 

<head> 

<title>Page Title</title> 
</head> 

<body> 
<h1>Heading</h1> 
<p>Paragraph</p> 
</body> 

</html> 


Syntax Explained: 


e The <!DOCTYPE html> declaration defines this document to be HTMLS 
e The <html> element is the root element of an HTML page 

e The <head> element contains meta information about the document 

e The <title> element specifies a title for the document 

e The <body> element contains the visible page content 

e The <hl> element defines a large heading 

e The <p> element defines a paragraph 
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Paragraphs Tag: The <p> tag defines a paragraph. Browsers automatically add some 
space (margin) before and after each <p> element. The margins can be modified with CSS 


(with the margin properties). 


Line Breaks: The <br> tag inserts a single line break. The <br> tag is an empty tag which 


means that it has no end tag. 


Headings: Headings are defined with the <hl> to <h6> tags.<hl> defines the most 


important heading. <h6> defines the least important heading. 


Strong and Emphasized text: The <em> tag is a phrase tag. It renders as emphasized text. 


The <strong> tag defines important text. 


Html Formatting Tag: HTML uses tags like <b> and <i> for formatting output, 


like bold and italic text respectively. 


HTML Lists 


Unordered HTML Lists: An unordered list starts with the <ul> tag. Each list item starts 
with the <li> tag. The list items will be marked with bullets (small black circles). 


Ordered HTML Lists: An ordered list starts with the <ol> tag. Each list item starts with 


the <li> tag. The list items will be marked with numbers. 


HTML Description Lists: A description list , is a list of terms, with a description of each 
term. The <dl> tag defines a description list. The <dt> tag defines the term (name), and 
the <dd> tag defines the data (description). 


HTML Images: In HTML, images are defined with the <img> tag. The <img> tag is 
empty, it contains attributes only, and does not have a closing tag. The src attribute defines 


the url (web address) of the image 


Syntax:-<img src="url" alt="some_text"> 
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HTML Links: HTML links are hyperlinks. A hyperlink is an element, a text, or an image 


that you can click on, and jump to another document. 
Syntax:-<a href="url">link text</a> 


HTML Tables: Tables are defined with the <table> tag. Tables are divided into table 
rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table 


row can also be divided into table headings with the <th> tag. 
HTML Forms 


HTML forms are used to pass data to a server. An HTML form can contain input elements 
like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also 
contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used 


to create an HTML form: 


<form> 
input elements 


</form> 


The Input Element: The most important form element is the <input> element. The 
<input> element is used to select user information. An <input> element can vary in many 
ways, depending on the type attribute. An <input> element can be of type text field, 
checkbox, password, radio button, submit button, and more. The most common input types 


are described below: 
<input type="text"> defines a one-line input field that a user can enter text into: 
Example: 


<form> 
First name: <input type="text" name="firstname"> <br/> 
Last name: <input type="text" name="lastname"> 


</form> 
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Output: 


First name: 

Last name: 

Password Field: <input type="password"> defines a password field: 
Example: 


<form> 
Password: <input type="password" name="pwd"> 


</form> 


Output: 


Password: 


Radio Buttons: <input type="radio"> defines a radio button. Radio buttons let a user select 


ONLY ONE of a limited number of choices: 


Example: 


<form> 
<input type="radio" name="sex" value="male">Male<br/> 
<input type="radio" name="sex" value="female" >Female 
</form> 


Output: 


How the HTML code above looks in a browser: 


Male 
Female 
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Checkboxes Buttons: <input type="checkbox"> defines a checkbox. Checkboxes let a 


user select ZERO or MORE options of a limited number of choices. 
Example: 


<form> 
<input type="checkbox" name="Vvehicle" value="Bike">I have a bike<br/> 
<input type="checkbox" name="Vvehicle" value="Car">I have a car 


</form> 
Output: 


How the HTML code above looks in a browser: 


I have a bike 
I have a car 


HTML Headings 
HTML headings are defined with the <h1> to <h6> tags. 
<h1> defines the most important heading. <h6> defines the least important heading: 


Example: 


<h1>This is heading 1</h1> 
<h2>This is heading 2</h2> 
<h3>This is heading 3</h3> 
<h4>This is heading 4</h4> 
<h5>This is heading 5</h5> 


<h6>This is heading 6</h6> 
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Output: 


How the HTML code above looks in a browser 


This is heading 1 
This is heading 2 
This is heading 3 
This is heading 4 
This is heading 5 
This is heading 6 
HTML Links 
HTML links are defined with the <a> tag: 
The link's destination is specified in the href attribute. 
Attributes are used to provide additional information about HTML elements 


Example: 


<a href="#">This is a link</a> 


Output: 


How the HTML code above looks in browser 


This is a link 
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Chapter-4 
Cascading Style Sheets (CSS) 


CSS stands for Cascading Style Sheets 

CSS describes how HTML elements are to be displayed on screen, paper, or in other 
media 

CSS saves a lot of work. It can control the layout of multiple web pages all at once 


External stylesheets are stored in CSS files 


Why Use CSS? 


CSS is used to define styles for your web pages, including the design, layout and 


variations in display for different devices and screen sizes. 


HTML was NEVER intended to contain tags for formatting a web page! 


HTML was created to describe the content of a web page, like: 


<h1>This is a heading</h1> 


<p>This is a paragraph. </p> 


When tags like <font>, and color attributes were added to the HTML 3.2 specification, it 
started a nightmare for web developers. Development of large websites, where fonts and 


color information were added to every single page, became a long and expensive process. 


To solve this problem, the World Wide Web Consortium (W3C) created CSS. 


CSS removed the style formatting from the HTML page! 


CSS is mainly of 3 types:- 


1. Inline CSS. 
2. Internal CSS. 
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3. External CSS. 


Inline CSS 


I have not mentioned them until now because in a way they defeat the purpose of using 
CSS in the first place. Inline styles are defined right in the (X)HTML file alongside the 
element you want to style. 

See example below. 


<html> 
<head> 
</head> 
<body> 
<p style="color:blue”>hello</p> 
<h1 style=" font-family:arial”>Baby</h1> 
</body> 
</html> 


Internal Css 
First we will explore the internal method. This way you are simply placing the CSS code 


within the <head></head> tags of each (X)HTML file you 
want to style with the CSS. 


The format for this is shown in the example below. 


<html> 
<head> 
<style> 
hi{ 
Color:blue; 
Font-family:Times new Roman;} 
</style> 
</head> 
<body> 
<hl1>HTML stands for Hyper Text markup language</h1> 
</body> 
</html> 


External CSS 


An external CSS file can be created with any text or HTML editor such as "Notepad" or 
"Dreamweaver". A CSS file contains no (X) HTML, only CSS. You simply save it with 
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the .css file extension. You can link to the file externally by placing one of the following 


links in the head section of every (X)HTML file you want to style with the CSS file. 
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" /> 


By using an external style sheet, all of your (X)HTML files link to one CSS file in order to 
style the pages. This means, that if you need to alter the design of all your pages, you only 
need to edit one .css file to make global changes to your entire website. Here are a few 
reasons this is better. 

(1) Easier Maintenance 

(2) Reduced File Size 

(3) Reduced Bandwidth 

(4) Improved Flexibility 


CSS Syntax 
A CSS rule-set consists of a selector and a declaration block: 


Selector Declaration Declaration 


© { color: 


Property Value Property Value 


blue; font-size: 12px;} 


The selector points to the HTML element you want to style. 
The declaration block contains one or more declarations separated by semicolons. 
Each declaration includes a CSS property name and a value, separated by a colon. 


A CSS declaration always ends with a semicolon, and declaration blocks are surrounded 


by curly braces. 


Example 


In this example all <p> elements will be center-aligned, with a red text color: 
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pt 
color: red; 


text-align: center; 


} 


Output: 


Hello World! 


The above CSS would text-align to center 


CSS Selectors 


CSS selectors are used to "find" (or select) the HTML elements you want to style. 


We can divide CSS selectors into five categories: 


e Simple selectors (select elements based on name, id, class) 


e Combinator selectors (select elements based on a specific relationship between them) 


e Pseudo-class selectors (select elements based on a certain state) 


e Pseudo-elements selectors (select and style a part of an element) 


e Attribute selectors (select elements based on an attribute or attribute value) 


Note: The universal selector (*) selects all HTML elements on the page. 


Example The CSS rule below will affect every HTML element on the page: 


= 
text-align: center; 
color: blue; 


} 
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Chapter-5 
JAVASCRIPT 


JavaScript was released by Netscape and Sun Microsystems in 1995. However, 


JavaScript is not the same thing as Java. 


It is a programming language. It is an interpreted language. It is object-based 


programming. It is widely used and supported. It is accessible to the beginner. 
Why JavaScript ? 
JavaScript is one of the 3 languages all web developers must learn: 

1. HTML to define the content of web pages 

2. CSS to specify the layout of web pages 

3. JavaScript to program the behavior of web pages 


Web pages are not the only place where JavaScript is used. Many desktop and server 
programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and 


CouchDB, also use JavaScript as their programming language. 


Uses of JavaScript 

Use it to add multimedia elements 

With JavaScript you can show, hide, change, resize images, and create image rollovers. 
You can create scrolling text across the status bar. 

Create pages dynamically 

Based on the user's choices, the date, or other external data, JavaScript can produce pages 
that are customized to the user. 

Interact with the user 

It can do some processing of forms and can validate user input when the user submits the 


form. 
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Writing JavaScript 

JavaScript code is typically embedded in the HTML, to be interpreted and run by the 
client's browser. Here are some tips to remember when writing JavaScript commands. 
JavaScript code is case sensitive 

White space between words and tabs are ignored 

Line breaks are ignored except within a statement 


JavaScript statements end with a semi colon (;) 


What JavaScript can do? 


1. JavaScript Can Change HTML Content 
One of many JavaScript HTML methods is getElementByld(). 


This example uses the method to "find" an HTML element (with id="demo") and 
changes the element content (innerHTML) to "Hello JavaScript": 


document. getElementById("demo").innerHTML = "Hello 
JavaScript"; 


2. JavaScript Can Change HTML Styles (CSS) 
Changing the style of an HTML element, is a variant of changing an HTML attribute: 


document. getElementById("demo").style.fontSize = "35px"; 


3% JavaScript Can Hide HTML Elements 
Hiding HTML elements can be done by changing the display style: 


document. getElementById("demo").style.display = "none"; 


The <script> Tag 
In HTML, JavaScript code must be inserted between <script> and </script> tags. 
<script> 


document.getElementByld("demo").innerHTML = "My First JavaScript"; 
</script> 
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JavaScript in <head> or <body> 
You can place any number of scripts in an HTML document. 


Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in 
both. 


JavaScript in <head> 
In this example, a JavaScript function is placed in the <head> section of an HTML page. 
The function is invoked (called) when a button is clicked: 


<!DOCTYPE html> 
<html> 
<head> 
<script> 
function myFunction() { 
document.getElementB yld("demo").innerHTML = "Paragraph After."; 
} 
</script> 
</head> 
<body> 
<h1>A Web Page</h1> 
<p id="demo">Paragraph Before</p> 
<button type="button" onclick="myFunction()">Try it</button> 
</body> 
</html> 


Output: 


JavaScript in Head JavaScript in Head 


P h aft 
Paragraph before i ba 


[Try | mye 


External JavaScript 
Scripts can also be placed in external files: 


External file: myScript.js 
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function myFunction() { 
document.getElementB yId("demo").innerHTML = "Paragraph changed."; 


} 


External scripts are practical when the same code is used in many different web pages. 
JavaScript files have the file extension .js. To use an external script, put the name of the 
script file in the src (source) attribute of a <script> tag: 


Example 
<script src="myScript.js" ></script> 


You can place an external script reference in <head> or <body> as you like. The script will 
behave as if it was located exactly where the <script> tag is located. External scripts cannot 
contain <script> tags. 

External JavaScript Advantages 

Placing scripts in external files has some advantages: 

e It separates HTML and code 

e It makes HTML and JavaScript easier to read and maintain 

e Cached JavaScript files can speed up page loads 

To add several script files to one page - use several script tags: 

Example 


<script src="myScript1.js"></script> 
<script src="myScript2.js" ></script> 


External References 


External scripts can be referenced with a full URL or with a path relative to the current 
web page. This example uses a full URL to link to a script: 


Example 
<script src="https://www.w3schools.com/js/myScript |.js" ></script> 
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Chapter-6 
PHP (HyperText Pre-Processor) 


What is PHP? 


PHP is an acronym for "PHP: Hypertext Preprocessor" 
PHP is a widely-used, open source scripting language 
PHP scripts are executed on the server 


PHP is free to download and use 


PHP is an amazing and popular language. It is powerful enough to be at the core of the 
biggest blogging system on the web (WordPress). It is deep enough to run the largest 
social network (Facebook). It is also easy enough to be a beginner's first server side 


language. 


What is a PHP File? 


PHP files can contain text, HTML, CSS, JavaScript, and PHP code 

PHP code are executed on the server, and the result is returned to the browser as plain 
HTML 

PHP files have extension ".php" 


What Can PHP Do? 


PHP can generate dynamic page content 

PHP can create, open, read, write, delete, and close files on the server 
PHP can collect form data 

PHP can send and receive cookies 

PHP can add, delete, modify data in your database 

PHP can be used to control user-access 


PHP can encrypt data 
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With PHP you are not limited to output HTML. You can output images, PDF files, and 


even flash movies. You can also output any text, such as XHTML and XML. 


Why PHP? 


PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) 
PHP is compatible with almost all servers used today (Apache, IIS, etc.) 
PHP supports a wide range of databases 

PHP is free. Download it from the official PHP resource: www.php.net 


PHP is easy to learn and runs efficiently on the server side 


What's new in PHP 7 


PHP 7 is much faster than the previous popular stable release (PHP 5.6) 
PHP 7 has improved Error Handling 
PHP 7 supports stricter Type Declarations for function arguments 


PHP 7 supports new operators (like the spaceship operator: <=> ) 


Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages contain 


HTML with embedded code that does "something" (in this case, output "Hi, I'm a PHP 


script!"). The PHP code is enclosed in special start and end processing instructions <?php 
and ?> that allow you to jump into and out of "PHP mode." What distinguishes PHP from 


something like client-side JavaScript is that the code is executed on the server, generating 


HTML which is then sent to the client. The client would receive the results of running 


that script, but would not know what the underlying code was. You can even configure 


your web server to process all your HTML files with PHP, and then there's really no way 


that users can tell what you have up your sleeve. 


The best things in using PHP are that it is extremely simple for a newcomer, but offers 


many advanced features for a professional programmer. Don't be afraid reading the long 


list of PHP's features. You can jump in, in a short time, and start writing simple scripts in 


a few hours. Although PHP's development is focused on server-side scripting, you can 


do much more with it. 
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A PHP script is executed on the server, and the plain HTML result is sent back to the 


browser. 
Basic PHP Syntax 


A PHP script can be placed anywhere in the document. A PHP script starts with <?php 


and ends with ?>: 


<?php 
// PHP code goes here 


?> 


The default file extension for PHP files is ".php". A PHP file normally contains HTML 
tags, and some PHP scripting code. Below, we have an example of a simple PHP file, 
with a PHP script that uses a built-in PHP function "echo" to output the text "Hello 


World!" on a web page: 


Example 


<!DOCTYPE html> 
<html> 
<body> 


<h1>My first PHP page</h1> 


<?php 
echo "Hello World!"; 


> 


</body> 
</html> 


Note: PHP statements end with a semicolon (;). 
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PHP Case Sensitivity 


In PHP, NO keywords (e.g. if, else, while, echo, etc.), classes, functions, and user-defined 
functions are case-sensitive. In the example below, all three echo statements below are 
equal and legal: 

Example 

<!DOCTYPE html> 

<html> 

<body> 

<?php 

ECHO "Hello World!<br>"; 

echo "Hello World!<br>"; 

EcHo "Hello World!<br>"; 

?> 

</body> 

</html> 


Look at the example below; only the first statement will display the value of the $color 
variable! This is because $color, $COLOR, and $coLOR are treated as three different 
variables: 

Example 

<!DOCTYPE html> 

<html> 

<body> 

<?php 

$color = "red"; 

echo "My car is". $color . "<br>"; 

echo "My house is". $COLOR . "<br>"; 

echo "My boat is". $coLOR . "<br>"; 


?> 


</body> 
</html> 


Chapter-7 
Project Discussion and Snapshots 


Today Online Examination System has become a fast growing examination method 
because of its speed and accuracy. It is also needed less manpower to execute the 
examination. Almost all organizations now-a-days, are conducting their objective exams 
by online examination system, it saves students time in examinations. Organizations can 
also easily check the performance of the student that they give in an examination. As a 
result of this, organizations are releasing results in less time. It also helps the environment 
by saving paper. 

According to today’s requirement, online examination project in php is very useful to 


learn it. 


What is an Online Examination System? 


In an online examination system examine get their user id and password with his/her 
admit card. This id is already saved in the examination server. When examine login to the 
server he/she get his/her profile already register. On the certain time examine gets the 
message to start the examination. All answers given by examine are saved into the server 
with his/her profile information. Online examination system also allows to correct the 
answer if the examine needed to change any answer in the examination time duration, 
however, after the time duration any change will not allow. This also makes c checking 
the answer easy and error proof as computers are more accurate than man and provide 
fast results too. Php is a web base language so we can create an online examination 


system in PHP. 


Administrator of Online Examination has multiple features such as Add, Delete, Update 
Topics and Question. 


To Login as Admin put inside your browser "www.applicationname/admin" 
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The user will automatically get the updated version by logging using the user 
ID and Password provided at the time of registration. 


No need of reprinting, appearance, vigilance and the job is done. 


Online examination system features 


1. Login system must be present and secured by password. 

2. Ability to save the answer given by the candidate along with the question. 
3. Answer checking system should be available. 

4. Could Update Profile 

5. Log out after the over. 

6. Admin Panel 


Project objective: 

Online examination system is a non removable examination pattern of today’s life. We 
need more time saving and more accurate examination system as the number of 
applicants is increasing day by day. For all IT students and professionals, it is very 


important to have some basic understanding about the online examination system. 


TECHNOLOGIES USED 
1. Tools to Be Used 
e Database design:- MySQL 
e Website design:- Bootstrap with Custom Designing using CSS3, Wordpress 
e Coding(logic):- PHP and JavaScript 
e Server:- XAMPP 
e Platform:- Windows 


e Application:-Notepad++ 
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2. Requirements and setting up system for PHP development 


e What we need to know: 
Designing part of the website is done with the help of Bootstrap 4.0 and CSS3 and 
for the database designing we use My SQL 

e What we need to have (System Requirements): 
To run Website we need a browser and to code we need application like 


Notepad++,atom, etc. 


SOFTWARE REQUIREMENTS 


1. 


Software Requirements 


Initially we need to have a development machine that is running any of the following 


operating systems: 


Windows XP, Vista, Windows 7, 8 
Development environment (Notepad++). 


XAMPP server. 


Software Requirement Analysis: The software requirement specification is produced 
at the culmination of the analysis task. The function and performance allocated to 
software as part of system engineering are refined by establishing a complete 
information description, a detailed functional description, a representation of system 
behavior, an indication of performance requirement and design constraints appropriate 


validation criteria, and other information pertinent to requirement. 


The introduction to software requirements specification states the goals and objectives 
of the software, describing it in the context of the computer based system. The 
Information Description provides a detailed description of the problem that the 


software must solve. Information content, flow and structure are documented. 
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SNAPSHOTS 
1) Home Page 


2US | Home P + v 


localhost: 


EDUCATION IS THE KEY TO 


YOUR SUCCESS 


Love exciting and new. Come aboard were expecting you. Love,life's 


sweetest reward,Let it flow,it floats back to you. 


LEARN MORE | APPLY NOW 


2) Registration Page 


{i epucampus| Alumni x = + 


localhost: 


Home > Sign In 


Login Register 


C) Remember Me 


Forgot Password? 
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3) LogIn page for an Adminstrator 


& & & ADMIN Login x oe 


a oO ff localhost:2080/Ad 


ADMIN 
PASSWORD 


Mi Remember Me 


4) Dashboard for creating the test with Test_name and Description about the test 
® Admini 


HOME Dashboard 
ser Deatils 
Genrate Test 


Generate Test 


Genrate Qt 


QD Tune here tn search 
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5) Creating Multiple Choice Questions 


#4) 1&4 ICOADMIN-Cryptocur x [} localhost:8080/ 127.0.0.1 / 


€ Oo n localhost:8¢ 


Generate Ques. & Ans. 


HOME Select test 


Questions 


or 


Answers 


Correct Answer 


6) Giving the Online Test as an registered user 


+=] [i EDUCAMPUS|HomeP: x | [&] localhost:8080/ 127.0.0.1/ | fi New tab 


< O f localhost:2080/starttest 


EDUCAMPUS About Courses News Contact Us Aakash Logout 


Question 1: 
1@ 

2C 

3 


4c 


Question 2: 2+2= 


101 
202 
303 
4@4 


Question 3: What would be the output of 


1©® 
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7) Result Page after giving the online test 


[) + ©) EDucamPus|HomeP: x [Ej localhost:8080/127.0.0.1/ | [md New tab 


localhost: 


=a EDUCAMPUS Home About Courses News Contact Us Logout 


Result 
Total Question : 3 
No of Atempt : 3 
Correct Answer : 3 


Wrong Answer : 0 


8) Varity of tests to choose from 


=) J EDUCAMPUS|Courses x [=] localhost8080/127.0.0.1/ | fe New tab 


localhost: 


Courses Home > Courses 


C&C++ -NET PHP 

Once you start coding in C, you'll be Visual Basic.NET is a multi-paradigm, object- PHP is a server-side scripting language 
introduced to one of the most commonly oriented programming language, designed for web development but also used 
used programming languages in the world. implemented on the .NET Framework. as a general-purpose programming language. 
APPLY NOW> APPLY NOW > APPLY NOW > 


all oo a ee. 
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WEEKLY REPORT 


WEEK: 1 


Description of activity, task, duty or Performed with | Performed Time Spent 
responsibility 


S 


Basic Tags and HTML Lists a 


Introduction to Forms and Form 


Validation 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=>HTML overview and basics of Front-End Web Development 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=>It’s all related to basics 


List one way you can improve your performance: 


=>By practicing HTML 
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WEEK: 2 


Description of activity, task, duty or Performed with | Performed Time Spent 
responsibility 


S 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=>Floating is quite interesting 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=>There was some issue in understanding up the float property 


List one way you can improve your performance: 


=>By practicing CSS 
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WEEK: 3 


Description of activity,task,duty or Performed with | Performed Time Spent 
responsibility 


Functions and External JS Yes 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=>JavaScript Functions was pretty interesting topic 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=>There were some difficulties in Control Flow in JavaScript 


List one way you can improve your performance: 


=>By optimizing the algorithms in JS 
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WEEK: 4 


Description of activity,task,duty or Performed with | Performed Time Spent 
responsibility 


Introduction To jQuery Section 


Regular Expressions and 1 lecture 
Form Validation 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=>Animation was a pretty new concept 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=> There were some difficulties in Draggables & Resizables 


List one way you can improve your performance: 


=>By analyzing AJAX 
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WEEK: 5 


Description of activity,task,duty or Performed with | Performed Time Spent 
responsibility 


Introduction to phpMyAdmin 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=> phpMySQL was easy 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=> There were some difficulties in GET and POST variables 


List one way you can improve your performance: 


=>By analyzing the problems in GET and POST variables 


40 


WEEK: 4 


Description of activity,task,duty or Performed with | Performed Time Spent 


responsibility 


Connecting and Retrieving Data from 
A Database 1 lecture 


Inserting And Updating Data Ga a 


—, a a id 


List one thing that went particularly well this week (area of improvement, new task, etc.) 


=>SQL was easy 


List one thing that was the most challenging this week (issue, problem, difficulty, etc.) 


=> There were some difficulties with Session Variables and Cookies 


List one way you can improve your performance: 


=>By practicing by making projects. 
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CONCLUSION AND FUTURE SCOPE 


From this summer training and the project, we are able to experience a technology which is Web 
Development. We are confident enough to tack the real-life problems or task based on the 
supervised and unsupervised learning. A website is the representation of the business online. 
These days, every business realizes the need for having a website and are putting in efforts to 
design and develop the best site for taking their products or services online. This is where we can 


see a great deal of scope for web development and design 


With the tremendous progress in the launch of websites, people who can create exemplary 
designs and platforms for their online presence is what businesses are searching for. Web 
developers and designers are bringing in all the best of their technical expertise and skills to 


develop and unique design websites that are and capable of pulling the crowd. 


Most web developers and designers are familiar with the latest tools, techniques, technologies, 
and frameworks that will help them get beautiful sites up in a short span of time. The 
development time of websites has come down with the agile technologies that make 


development easier. Here, we will cover the scope and future of web development. 
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